<template>
  <div class="content-box">
    <!-- 添加 -->
    <el-card class="add-card">
      <div>
        <el-icon>
          <Fold />
        </el-icon>
        <span>数据列表</span>
      </div>
      <div>
        <el-button>添加</el-button>
      </div>
    </el-card>
    <!-- 表格 -->
    <!-- 秒杀活动列表 -->
    <div>
      <div class="table">
        <el-table
          :data="tableData"
          :cell-style="{ 'text-align': 'center' }"
          border
        >
          <el-table-column
            align="center"
            prop="id"
            label="编号"
            width="100"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="name"
            label="秒杀时间段名称"
          ></el-table-column>
          <el-table-column align="center" label="每日开始时间">
            <template #default="scope">
              {{ formatDate(scope.row.startTime) }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="每日结束时间">
            <template #default="scope">
              {{ formatDate(scope.row.endTime) }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="productCount" label="商品数量">
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template #default>
              <div class="edit">
                <el-button size="small" text type="primary">编辑</el-button>
                <el-button size="small" text type="primary">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as http from "@/request/api";
import { Ref, ref } from "vue";
import dayjs from "dayjs";
import { useRoute } from "vue-router";

let tableData: Ref<{}[]> = ref([]);

const route = useRoute();
const flashPromotionId = route.query.flashPromotionId as unknown as number;

async function fetchData() {
  // 发送请求获取用户列表
  let adminList = await http.flash.getFlashSessionSelectList({
    flashPromotionId,
  });
  if (adminList.code === 200) {
    tableData.value = adminList.data;
  }
}
fetchData();

// 格式化时间
function formatDate(date?: string) {
  if (!date) return "";
  return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
}
</script>

<style>
.content-box {
  padding: 10px 20px;
  box-sizing: border-box;
  overflow-x: hidden;
}
.box-card {
  margin: 10px 0;
  height: 128px;
  font-size: 14px;
}

.box-card .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card .top span {
  margin: 0 8px;
}

.el-card.add-card {
  --el-card-padding: 0;
  height: 55px;
  margin: 10px 0;
  /* width: 98%; */
  padding: 0 20px;
  box-sizing: border-box;
}

.el-card.add-card .el-card__body {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-card.add-card .el-card__body div:first-child span {
  margin-left: 10px;
}

.pagination {
  height: 40px;
  margin: 10px;
  padding-bottom: 10px;
  float: right;
}

.el-button--small {
  padding: 0;
}
</style>
